<script setup lang="ts" name="EChartMap">
import * as echarts from 'echarts'
import 'echarts-gl'
import type { EChartsOption, ECharts } from 'echarts'
import { debounce } from 'lodash-es'
import { PropType } from 'vue'
import { isEmpty } from '@/utils/is'
import { templateRef, useResizeObserver, useDebounceFn } from '@vueuse/core'
import { getJsonMap } from '@/components/EChart/src/helper'

const emit = defineEmits(['init'])

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('echart')

const props = defineProps({
  options: {
    type: Object as PropType<EChartsOption>,
    required: true
  },
  code: {
    type: String,
    required: true
  }
})

const mapJsonList: any = ref({})
const mapCode = ref('')

const elRef = ref<ElRef>()

let echartRef: Nullable<ECharts> = null


watch(
  () => props.options,
  async (options) => {
    if (props.code) {
      if (isEmpty(mapJsonList.value)) {
        mapJsonList.value = await getJsonMap()
      }
      if (mapCode.value !== props.code) {
        mapCode.value = props.code
        echartRef?.clear()
      }
      console.log(mapJsonList.value[props.code])
      echarts.registerMap(props.code, mapJsonList.value[props.code])
      if (options) {
        console.log(options)
        if (echartRef) {
          echartRef?.setOption(options)
        } else {
          if (unref(elRef)) {
            echartRef = echarts.init(unref(elRef) as HTMLElement)
            echartRef?.setOption(options)
            console.log('实例化', echartRef)
            emit('init', echartRef)
          }
        }
      }
    }
  },
  {
    immediate: true,
    deep: true
  }
)

// watch(
//   () => props.code,
//   async (code) => {
//     if (code) {
//       await getJsonMap()
//       console.log(mapJsonList.value[code])
//       echarts.registerMap(code, mapJsonList.value[code])
//       if (props.options) {
//         console.log(props.options)
//         if (echartRef) {
//           echartRef?.setOption(props.options)
//         } else {
//           if (unref(elRef)) {
//             echartRef = echarts.init(unref(elRef) as HTMLElement)
//             echartRef?.setOption(props.options)
//             console.log('实例化', echartRef)
//             emit('init', echartRef)
//           }
//         }
//       }
//     }
//   },
//   {
//     immediate: true,
//     deep: true
//   }
// )

const resizeHandler = debounce(() => {
  if (echartRef) {
    echartRef.resize()
  }
}, 100)

const elRefDom = templateRef<HTMLElement | null>('elRef', null)

// 监听元素尺寸变化
useResizeObserver(
  elRefDom,
  useDebounceFn(() => {
    resizeHandler()
  }, 200)
)

onMounted(async () => {
  window.addEventListener('resize', resizeHandler)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeHandler)
})

onActivated(() => {
  if (echartRef) {
    echartRef.resize()
  }
})
</script>

<template>
  <div ref="elRef" :class="[$attrs.class, prefixCls]" />
</template>

<style scoped lang="scss">
$prefix-cls: #{$namespace}-echart;

.#{$prefix-cls} {
  width: 100%;
  flex: 1;
}
</style>
